<template>
  <div style="margin-top:70px;height:650px;padding:0 20px;"
       class="home">
    <el-form label-width="90px"
             style="overflow: hidden;">
      <el-form-item style="width:70%"
                    label="文章名称">
        <el-input v-model="title"></el-input>
      </el-form-item>
      <el-form-item style="float:left"
                    label="是否热门:">
        <el-radio-group size="mini"
                        v-model="isHot">
          <el-radio-button label="1">是</el-radio-button>
          <el-radio-button label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="float:left"
                    label="是否聚焦:">
        <el-radio-group size="mini"
                        v-model="focus">
          <el-radio-button label="1">是</el-radio-button>
          <el-radio-button label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="float:left"
                    label="是否置顶:">
        <el-radio-group size="mini"
                        v-model="isTop">
          <el-radio-button label="1">是</el-radio-button>
          <el-radio-button label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="float:left"
                    label="是否推荐:">
        <el-radio-group size="mini"
                        v-model="recommend">
          <el-radio-button label="1">是</el-radio-button>
          <el-radio-button label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="float:left">
        <el-button @click="save"
                   type="primary">保存</el-button>
      </el-form-item>
    </el-form>
    <mavon-editor style="height:100%"
                  :toolbars="markdownOption"
                  v-model="contents"
                  @change="change"
                  @imgAdd="imgAdd" />
    <!-- <div class="hljs"
         ref="hlDiv"
         v-html="code"></div> -->
  </div>
</template>

<script>
import Banner from '@/components/banner'
import Feature from '@/components/feature'
import sectionTitle from '@/components/section-title'
import Post from '@/components/post'
import SmallIco from '@/components/small-ico'
import Quote from '@/components/quote'
import { fetchList, upLoadImg, save } from '../../api'
import marked from 'marked'
// import hljs from "highlight.js"
// import javascript from 'highlight.js/lib/languages/javascript'
// import 'highlight.js/styles/monokai-sublime.css'
export default {
  name: 'adminIndex',
  props: ['cate', 'words'],
  data () {
    return {
      formdata: {},
      code: '',
      recommend: '0',
      title: '',
      isHot: '0',
      isTop: '0',
      focus: '0',
      file: {}, //图片
      //生成的内容
      contents: ``,
      //生成html
      html: '',
      //配置项，根据自己的需求定义
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        // fullscreen: true, // 全屏编辑
        // readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    }
  },
  components: {
    Banner,
    Feature,
    sectionTitle,
    Post,
    SmallIco,
    Quote
  },

  methods: {
    //如果要上传图片返回路径
    imgAdd (pos, $file) {
      var _this = this;
      var formdata = new FormData();
      formdata.append("image", $file);
      this.formdata = formdata
      this.upLoadImg()
      // this.$axios("url", {
      //   method: "post",
      //   data: formdata
      // }).then(resp => {
      //   console.log(resp);
      //   var json = resp.data.message; //取出上传成功后的url
      //   if (resp.status == 200) {
      //     _this.$refs.md.$imgUpdateByUrl(pos, json.msg)
      //     _this.$refs.md.$imglst2Url([[pos, json]])
      //   } else {
      //     _this.$message({ type: json.status, message: json });
      //   }
      // });
    },
    upLoadImg () {
      upLoadImg(this.formdata).then(res => {
        this.file = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    change (value, render) {
      // render 为 markdown 解析后的结果
      this.html = render;
    },
    getDateNow (data) {
      var date = new Date()
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      // var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      // var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      // var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      // return Y + M + D + h + m + s
      return Y + M + D
    },
    save () {
      let time = this.getDateNow()
      var params = {
        title: this.title,
        isHot: this.isHot,
        isTop: this.isTop,
        recommend: this.recommend,
        focus: this.focus,
        file: this.file,
        pubtime: time,
        summary: this.contents.substring(0, 30),
        viewsCount: '0',
        commentsCount: '0',
        content: this.contents,
        html: this.html
      }
      save(params).then(res => {
        if (res.status == 200) {
          console.log('保存成功')
        } else {
          console.log('保存失败')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {

  },
}
</script>
<style scoped lang="less">
.site-content {
  .notify {
    margin: 60px 0;
    border-radius: 3px;
    & > div {
      padding: 20px;
    }
  }

  .search-result {
    padding: 15px 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    border: 1px dashed #ddd;
    color: #828282;
  }
}

.top-feature {
  width: 100%;
  height: auto;
  margin-top: 30px;

  .feature-content {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    position: relative;

    .feature-item {
      width: 32.9%;
    }
  }
}

.site-main {
  padding-top: 80px;

  &.search {
    padding-top: 0;
  }
}

.more {
  margin: 50px 0;
  .more-btn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #adadad;
    border: 1px solid #adadad;
    border-radius: 20px;
    margin: 0 auto;
    cursor: pointer;
    &:hover {
      color: #8fd0cc;
      border: 1px dashed #8fd0cc;
    }
  }
}

/******/
@media (max-width: 800px) {
  .top-feature {
    display: none;
  }

  .site-main {
    padding-top: 40px;
  }

  .site-content {
    .notify {
      margin: 30px 0 0 0;
    }

    .search-result {
      margin-bottom: 20px;
      font-size: 16px;
    }
  }
}

/******/
</style>
